<template> 
	<div class="icons">
    <swiper>
      <swiper-slide class="icon-container" v-for="(page,index) of pages" :key="index">
        <div class="icon" v-for="(item,index) of page" :key="index">
          <img class="icon-img" :src="item.imgUrl">
          <div class="icon-desc">{{item.desc}}</div>
        </div> 
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</div>
</template> 

<script> 
  export default { 
    props:{
      iconList:Array
    },
    data () { 
      return { 
        swiperOption:{
          pagination:'.swiper-pagination'
        },
      }; 
    }, 
    computed:{
      pages(){
        const pages=[]
        this.iconList.forEach((item,index)=>{
          const page=Math.floor(index/8);
          if(!pages[page]){
            pages[page]=[]
          }
          pages[page].push(item)
        })
        return pages;
      }
    },

    methods: { 

    },
    mounted(){

    }


  }; 
</script> 

<style scoped> 
.icons{
  height: 0;
  padding-bottom: 45%;
  background: white;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

.icon-container{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-top: 20px;
}
.icon{
  height: 100px;
  width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.icon-img{
  width: 55px;
}
.icon-desc{
  color: #333;
  width: 60px;
}

.swiper-pagination swiper-pagination-bullets{
  color: white;
}

</style> 